<template>
  <div class="home-left">
    <div class="head"></div>
    <div class="count-info">
      <div class="count-info__card jiuzhen">
        <span class="number">{{ countInfo.todayJiuZhen }}</span>
        <span class="name">今日就诊数</span>
      </div>
      <div class="count-info__card jiuzhen">
        <span class="number">{{ countInfo.totalJiuZhen }}</span>
        <span class="name">就诊总数</span>
      </div>
      <div class="count-info__card chufang">
        <span class="number">{{ countInfo.todayChuFang }}</span>
        <span class="name">今日处方数</span>
      </div>
      <div class="count-info__card chufang">
        <span class="number">{{ countInfo.totalChuFang }}</span>
        <span class="name">处方总数</span>
      </div>
    </div>
    <div class="hospital-container">
      <Swiper ref="mySwiper" style="cursor: pointer;" class="swiper" :options="swiperOptions"  @mouseenter.native="stopAutoplay" @mouseleave.native="startAutoplay">
        <swiper-slide class="swiper-slide" v-for="(hospitalInfo, index) in hospitalInfoList" :key="index">
          <div v-for="(item, index1) in hospitalInfo" :key="index1" class="hospital-info">
            <div class="hospital-info__head">
              <div class="name">{{ item.name }}</div>
              <div class="monitor-count">
                <!-- <div class="label">监控数</div>
                <div class="value">{{ item.monitorCount }}</div> -->
              </div>
            </div>
            <div class="hospital-info__content">
			  <div class="hospital-info__item">
			    <div class="label">接入监控数</div>
			    <div class="value">{{ item.monitorCount }}</div>
			  </div>
              <div class="hospital-info__item">
                <div class="label">总处方</div>
                <div class="value">{{ item.totalPrescription }}</div>
              </div>
              <div class="hospital-info__item">
                <div class="label">总预警数</div>
                <div class="value">{{ item.totalWarning }}</div>
              </div>
              <div class="hospital-info__item">
                <div class="label">今日就诊数</div>
                <div class="value">{{ item.todayOutpatient }}</div>
              </div>
              <div class="hospital-info__item">
                <div class="label">今日处方数</div>
                <div class="value">{{ item.todayPrescription }}</div>
              </div>
              <div class="hospital-info__item">
                <div class="label">今日预警数</div>
                <div class="value">{{ item.todayWarning }}</div>
              </div>
              <div class="hospital-info__item">
                <div class="label">总就诊数</div>
                <div class="value">{{ item.totalOutpatient }}</div>
              </div>
            </div>
          </div>
        </swiper-slide>
      </Swiper>
    </div>
    <div class="page-changer">
      <i class="el-icon-arrow-left" :class="{active: activeArrow==='left'}" @click="handlePagerClick('left')"></i>
      <i class="el-icon-arrow-right" :class="{active: activeArrow==='right'}" @click="handlePagerClick('right')"></i>
    </div>
  </div>
</template>
<script>
import {toDayWarn,analysisResult, hospitalNationList,warnList, getWarnType} from "@/api/his/screen";
export default {
  name: "HomeLeft",
  data() {
    return {
      activeArrow: null,
	  queryParams:{
		  type: 'pre'
	  },
      countInfo: {
        todayJiuZhen: 0,
        totalJiuZhen: 0,
        todayChuFang: 0,
        totalChuFang: 0,
      },
      swiperOptions: {
          loop: true,
          direction: 'horizontal',
          speed: 1000, // 发生页面切换动画时，动画的切换速度
          autoplay: {
              delay: 2000, // 幻灯片停留时间
              disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay
          },
      },
	  hospitalInfoList: [

	  ]
	 //     hospitalInfoList: [
		// 	[
		// 		{
		// 			monitorCount:3,
		// 			name:"遵义市汇川区板桥镇白果村卫生室",
		// 			totalPrescription:0,
		// 			todayPrescription:0,
		// 			totalOutpatient:650813,
		// 			todayOutpatient:46150,
		// 			totalWarning:463,
		// 			todayWarning:0
		// 		},
		// 		{
		// 		monitorCount:3,
		// 		name:"遵义市汇川区板桥镇白果村卫生室",
		// 		totalPrescription:0,
		// 		todayPrescription:0,
		// 		totalOutpatient:650813,
		// 		todayOutpatient:46150,
		// 		totalWarning:463,
		// 		todayWarning:0
		// 		}
		// 	],
		// 	[
		// 		{
		// 		monitorCount:3,
		// 		name:"遵义市汇川区板桥镇白果村卫生室",
		// 		totalPrescription:0,
		// 		todayPrescription:0,
		// 		totalOutpatient:650813,
		// 		todayOutpatient:46150,
		// 		totalWarning:463,
		// 		todayWarning:0
		// 		}
		// 	]
		// ]

      // hospitalInfoList: [
      //   [{
      //     name: '兴康卫生院1',
      //     monitorCount: 2300,
      //     totalPrescription: 2000,
      //     todayPrescription: 2000,
      //     totalWarning: 3,
      //     todayWarning: 2000,
      //     totalOutpatient: 2000,
      //     todayOutpatient: 2000
      //   }, {
      //     name: '兴康卫生院2',
      //     monitorCount: 2300,
      //     totalPrescription: 2000,
      //     todayPrescription: 2000,
      //     totalWarning: 3,
      //     todayWarning: 2000,
      //     totalOutpatient: 2000,
      //     todayOutpatient: 2000
      //   }],
      //   [{
      //     name: '兴康卫生院3',
      //     monitorCount: 2300,
      //     totalPrescription: 2000,
      //     todayPrescription: 2000,
      //     totalWarning: 3,
      //     todayWarning: 2000,
      //     totalOutpatient: 2000,
      //     todayOutpatient: 2000
      //   }, {
      //     name: '兴康卫生院4',
      //     monitorCount: 2300,
      //     totalPrescription: 2000,
      //     todayPrescription: 2000,
      //     totalWarning: 3,
      //     todayWarning: 2000,
      //     totalOutpatient: 2000,
      //     todayOutpatient: 2000
      //   }],
      //   [{
      //     name: '兴康卫生院5',
      //     monitorCount: 2300,
      //     totalPrescription: 2000,
      //     todayPrescription: 2000,
      //     totalWarning: 3,
      //     todayWarning: 2000,
      //     totalOutpatient: 2000,
      //     todayOutpatient: 2000
      //   }, {
      //     name: '兴康卫生院6',
      //     monitorCount: 2300,
      //     totalPrescription: 2000,
      //     todayPrescription: 2000,
      //     totalWarning: 3,
      //     todayWarning: 2000,
      //     totalOutpatient: 2000,
      //     todayOutpatient: 2000
      //   }]
      // ]
    };
  },
  created() {
  	  this.toDay();
  },
  methods: {
    stopAutoplay(){
      this.$refs.mySwiper.swiperInstance.autoplay.stop()
    },
    startAutoplay(){
      this.$refs.mySwiper.swiperInstance.autoplay.start()
    },
    handlePagerClick(val) {
      this.activeArrow = val
      if (val === 'left') {
        this.$refs.mySwiper.$swiper.slideNext()
      } else {
        this.$refs.mySwiper.$swiper.slidePrev()
      }
    },
	splitList(list){
	  this.hospitalInfoList = []
	  for (let i = 0; i < list.length; i++) {
		 var item = list[i]
		 var toIndex = Math.min(i+2,list.length)
		 var sublist = list.slice(i, toIndex);
		 this.hospitalInfoList.push(sublist)
	  }
	  console.log(this.hospitalInfoList)
	},
	toDay() {
	  //今日总处方数
	  analysisResult().then(response => {
			 if(response.code ==200){
				  this.countInfo = response.data
			 }
	  });
	  //左边查出机构
	  hospitalNationList().then(response => {
			if(response.code ==200){
				this.splitList(response.data)
			}
	  });

	}
  },

};
</script>
<style lang="scss" scoped>
.head {
  width: 418px;
  height: 28px;
  background-image: url("~@/assets/images/home/statistics.png");
  margin-bottom: 29px;
  background-repeat: no-repeat;
}

.count-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 28px;
  margin-right: -18px;

  &__card {
    width: 190px;
    box-sizing: border-box;
    height: 77px;
    background-color: #fff;
    border-radius: 10px;
    background-repeat: no-repeat;
    padding-left: 78px;
    background-position: 33px 22px;
    min-width: 0;
    flex:36%;
    border-radius: 10px;
    opacity: 0.85;
    margin-right: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .number {
      margin-bottom: 10px;
      font-weight: 800;
      font-size: 20px;
      color: #393939;
      line-height: 16px;
    }

    .name {
      font-weight: 500;
      font-size: 16px;
      color: #323232;
      line-height: 16px;
    }
  }

  .jiuzhen {
    background-size: 27px 33px;
    background-image: url("~@/assets/images/home/jiuzhen.png");
  }

  .chufang {
    margin-top: 13px;
    background-size: 33px 27px;
    background-image: url("~@/assets/images/home/chufang.png");
  }
}

.hospital-container {
  overflow: hidden;
}
.hospital-info {
  // height: 306px;
  background: #FFFFFF;
  border-radius: 10px;
  opacity: 0.73;
  margin-top: 15px;
  padding: 16px 14px 29px;

  .hospital-info__head {
    margin: 0;
    height: 56px;
    background: rgba(67, 115, 241, 0.33);
    border-radius: 10px;
    border: 1px solid #4373F1;
    display: flex;
    align-items: center;
    padding-left: 66px;
    line-height: 56px;

    .name {
      font-weight: bold;
      font-size: 16px;
      color: #302A72;
      // margin-right: 6px;
	  width:300px;
	  overflow: hidden; /* 超出部分隐藏 */
	  text-overflow: ellipsis; /* 添加省略号表示被裁切的文本 */
	  white-space: nowrap; /* 保持单行显示 */
    }

    .monitor-count {
      display: flex;
      .label {
        // font-weight: 500;
        // font-size: 16px;
        // color: #646464;
        // margin-right: 0px;
      }

      .value {
        font-weight: bold;
        font-size: 16px;
        color: #4568CE;
      }
    }
  }

  .hospital-info__content {
    display: flex;
    flex-wrap: wrap;

    .hospital-info__item {
      flex: 34%;
      margin-top: 33px;
      height: 33px;
      position: relative;
      padding-left: 24px;
      line-height: 16px;

      &::before {
        content: '';
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 3px;
        background: #4373F1;
        position: absolute;
        left: 8px;
        top: 50%;
        transform: translateY(-50%);

      }

      .label {
        font-weight: 500;
        font-size: 16px;
        color: #646464;
      }

      .value {
        margin-top: 5px;
        font-weight: 500;
        font-size: 20px;
        color: #333333;
      }
    }
  }
}

.page-changer {
  text-align: center;
  margin-top: 5px;
  i {
    cursor: pointer;
    margin-right: 17px;
  }
  .active {
    color: #4373F1;
  }
}
</style>
